<template>
    <div>
        手机号：
        <Input v-model="searchData.mobile" style="width: 150px"></Input>
        城市：
        <Select v-model="searchData.user_city_id" filterable style="width: 150px">
            <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.city_name }}</Option>
        </Select>
        下单时间：
        <Date-picker type="daterange" placeholder="开始日期" v-model="searchData.create_time"></Date-picker>
        <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
        <Button @click="add" type="info" style="margin-left: 10px;">添加订单</Button>
        <br>
        <br>
        <Alert type="error">总数据：{{ info.total }}条；总套餐金额：{{ info.amount }}元；总支付金额：{{ info.pay_amount }}
            元；总剩余时长：{{ info.duration }}小时；</Alert>
        <Table :columns="columns" :data="list" border stripe size="small">
            <template slot-scope="{ row , index}" slot="residueSlot">
                <span><span style="color: blue;font-size: 20px;font-weight: bold;">{{ row.total }}</span>小时，</span>
                <span>余<span style="color: red;font-size: 22px;font-weight: bold;">{{ row.residue_duration
                }}</span>小时</span>
            </template>
            <template slot-scope="{ row , index}" slot="memberSlot">
                <Button @click="showDetail(row.order_sn)" type="info" size="small">明细</Button>
                <Button @click="edit(row.id)" type="primary" size="small" style="margin-left: 5px;">改时长</Button>
                <Button @click="del(row.id)" type="error" size="small" style="margin-left: 5px;">删除</Button>
            </template>
        </Table>
        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :current="searchData.page">
        </Paginate>
        <!-- 添加订单 -->
        <Modal title="套餐订单" :width="40" v-model="showAddModel" :mask-closable="false">
            <Form ref="formValidate" :model="orderInfo" :label-width="80">
                <FormItem label="订单来源">
                    <radioGroup v-model="orderInfo.source_id">
                        <Radio v-for="item in sourceArr" :label="item.id" :key="item.id" border>{{ item.title }}</Radio>
                    </radioGroup>
                </FormItem>
                <FormItem label="课程类型">
                    <radioGroup v-model="orderInfo.is_trial">
                        <Radio :label="0">正式课</Radio>
                        <Radio :label="1">体验课(体验好了买套餐)</Radio>
                    </radioGroup>
                </FormItem>
                <FormItem label="城市">
                    <Select v-model="orderInfo.city_id" filterable multiple>
                        <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.city_name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="套餐名称">
                    <Input v-model="orderInfo.menu_name"></Input>
                </FormItem>
                <FormItem label="总时长">
                    <Input v-model="orderInfo.total" type="number"></Input>
                </FormItem>
                <FormItem label="金额">
                    <Input v-model="orderInfo.amount" type="number"></Input>
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input v-model="orderInfo.mobile" type="number"></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="orderInfo.order_remark" type="textarea" :rows="4"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long @click="addMenuOrder">确定</Button>
            </div>
        </Modal>
        <!-- 修改时长 -->
        <Modal title="订单" width="40" v-model="showAdd" @on-ok="addSubmit">
            <Form ref="formValidate" :model="formItem" :label-width="110">
                <FormItem label="剩余时长(小时)">
                    <Input v-model="formItem.duration" type="number"></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="formItem.order_remark" type="textarea" :rows="4"></Input>
                </FormItem>
            </Form>
        </Modal>

        <!-- 明细 -->
        <Modal title="订单明细" width="50" v-model="showDrawer">
            <Table :columns="columns1" :data="list1" border stripe size="small">
            </Table>
            <Paginate :total="total1" @on-change="changePage1" @on-page-size-change="changeSize1">
            </Paginate>
        </Modal>
    </div>
</template>

<script>
import Paginate from "_c/paginate";
export default {
    name: "integralGoodsList",
    components: {
        Paginate,
    },
    data() {
        return {
            // 列表
            columns: [
                {
                    title: '订单编号',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '城市',
                    align: "center",
                    key: 'city_txt',
                },
                {
                    title: '手机号',
                    align: "center",
                    key: 'mobile',
                },
                {
                    title: '类型',
                    align: "center",
                    key: 'source_title',
                },
                {
                    title: '套餐',
                    align: "center",
                    key: 'menu_name',
                },
                {
                    title: '套餐金额',
                    align: "center",
                    key: 'amount',
                },
                {
                    title: '支付金额',
                    align: "center",
                    key: 'pay_amount',
                },
                {
                    title: '时长',
                    align: "center",
                    key: 'used_duration',
                    slot: 'residueSlot',
                },
                {
                    title: '有效期',
                    align: "center",
                    key: 'valid_time_txt',
                },
                {
                    title: '支付时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '操作',
                    align: "center",
                    key: 'make',
                    width: 200,
                    slot: 'memberSlot',
                },
            ],
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
                order_type: 1
            },
            // 详情
            showDrawer: false,
            columns1: [
                {
                    title: '订单编号',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '教练名称',
                    align: "center",
                    key: 'username',
                },
                {
                    title: '使用时长',
                    align: "center",
                    key: 'used_duration',
                },
                {
                    title: '剩余时长',
                    align: "center",
                    key: 'residue_duration',
                },
                {
                    title: '使用日期',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '备注',
                    align: "center",
                    key: 'remark',
                },
            ],
            list1: [],
            total1: 0,
            searchData1: {
                page: 1,
                limit: 10,
            },
            // 添加时长
            showAdd: false,
            formItem: {},
            cityArr: [],
            // 添加订单
            showAddModel: false,
            sourceArr: [],
            orderInfo: {},
            // 统计信息
            info: {
                total: 0,
                amount: 0,
                pay_amount: 0,
                duration: 0,
            },
        }
    },
    methods: {
        getList() {
            this.$axios('/admin/partner/order/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        getTotalList() {
            this.$axios('/admin/partner/order/getTotalList', this.searchData).then(res => {
                this.info = res;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
            this.getTotalList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
                order_type: 1
            };
            this.getList();
            this.getTotalList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
            this.getTotalList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
            this.getTotalList();
        },
        changePage1(page) {
            this.searchData1.page = page;
            this.getReserveOrderList();
        },
        changeSize1(size) {
            this.searchData1.limit = size;
            this.getReserveOrderList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        showDetail(order_sn) {
            this.searchData1.order_sn = order_sn;
            this.getReserveOrderList();
            this.showDrawer = true;
        },
        getReserveOrderList() {
            this.$axios('/admin/partner/order_log/getList', this.searchData1).then(res => {
                this.list1 = res.data;
                this.total1 = res.total;
            });
        },
        timeStampToDate(timestamp) {
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = date.getMonth() + 1; // 月份从0开始，需要加1
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        // 开通城市
        openCityArr() {
            this.$axios('/admin/partner/city/getArr').then(res => {
                this.cityArr = res;
            });
        },
        edit(id) {
            this.formItem.id = id;
            this.showAdd = true;
        },
        addSubmit() {
            this.$axios('/admin/partner/order/modifyDuration', this.formItem).then(res => {
                this.$Message.success('执行成功');
                this.showAdd = false;
                this.getList();
            });
        },
        add() {
            this.orderInfo = {
                is_trial: 0,
                source_id: this.sourceArr.length == 0 ? 0 : this.sourceArr[0]['id'],
            };
            this.showAddModel = true;
        },
        // 订单来源
        orderSourceArr() {
            this.$axios('/admin/config/order_source/getArr').then(res => {
                this.sourceArr = res;
            });
        },
        addMenuOrder() {
            this.$axios('/admin/partner/order/save', this.orderInfo).then(res => {
                this.$Message.success('执行成功');
                this.showAddModel = false;
                this.getList();
            });
        },
        del(id) {
            this.$Modal.confirm({
                title: '删除',
                content: "<p>您确定要删除吗？</p>",
                onOk: () => {
                    this.$axios('/admin/partner/order/del', { id: id }).then(res => {
                        this.$Message.success('删除成功');
                        this.getList();
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
    },
    created() {
        // 查询自己管理员
        this.getList();
        this.getTotalList();
        this.openCityArr();
        this.orderSourceArr();
    }
}
</script>